<%@page import="com.weixin.util.JsSignUtil"%>
<%@page import="java.util.Map"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>签到模块</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/bootstrap.min.css">
    <style>

        body {
            background-color: whitesmoke;
            width: 100%;
            height: 100%;
        }

        .hwb_header {
            padding-top: 3%;
            padding-bottom: 6%;
            font-size: 10px;
            color: #8e8e93;
            background: #fff;
        }

        hr {
            margin: 0px;
        }

        #position_div {
            padding-left: 3%;
            padding-top: 2%;
            padding-bottom: 2%;
            padding-right: 2%;
            font-size: x-large;
            background: #fff;
        }

        #position_name {
            padding-bottom: 1%;
        }

        #map {
            width: 100%;
            height: 100px;
            margin-bottom: 5%;
        }

        #container {
            height: 100px;
        }

        #visit {
            width: 100%;
            background: #fff;
            padding-top: 1%;
            padding-bottom: 1%;
        }

        #visit input {
            margin: 0px;
            padding: 0px;
            width: 100%;
            line-height: 35px;
            border-left: 0;
            border-right: 0;
            border-top: 0;
            border-bottom: 0;
        }

        #visit div {
            margin: 0px;
            padding: 0px;
            vertical-align: middle;
            line-height: 35px;
        }

        #visit label {
            vertical-align: middle;
            margin: 0px;
            padding: 0px;
            font-size: larger;
        }

        #signin_div {
            width: 100%;
            position: absolute;
            bottom: 0%;
        }

        .btn-circle {
            width: 30px;
            height: 30px;
            text-align: center;
            padding: 6px 0;
            font-size: 12px;
            line-height: 1.428571429;
            border-radius: 15px;
        }

        .btn-circle.btn-lg {
            width: 50px;
            height: 50px;
            padding: 10px 16px;
            font-size: 18px;
            line-height: 1.33;
            border-radius: 25px;
        }

        .btn-circle.btn-xl {
            width: 70px;
            height: 70px;
            padding: 10px 16px;
            font-size: 24px;
            line-height: 1.33;
            border-radius: 35px;
        }

        .btn-circle.btn-hg {
            width: 100px;
            height: 100px;
            padding: 10px 16px;
            font-size: 24px;
            line-height: 1.33;
            border-radius: 50px;
            background: burlywood;
            border: none;
        }

        #photo {
            width: 100%;
            position: absolute;
            bottom: 20%;
        }

        #adjust{
            font-size: small;
        }

		#picture{
            padding-top: 3%;
            padding-left: 3%;
            padding-right: 3%;
            background-color: white;
            display: none;
        }

        #picture img{
            width: 100%;
            height: 250px;
        }
		
		#signin_div{
            display: none;
            padding-bottom: 5%;
        }
		
		.blue{
            background: #269abc;
            color: white;
        }

        .yellow{
            background: burlywood;
            color: white;
        }
    </style>
</head>
<body id="app">
<div id="div1">
    <div class="hwb_header">
        <div class="col-xs-5 col-xs-offset-1">
            <span class="glyphicon glyphicon-time"></span> 2016年9月26日
        </div>
        <div class="col-xs-6">
            <span class="glyphicon glyphicon-send"></span> 当前企业 : 杭州景联文
        </div>
    </div>
    <hr>
    <div id="position_div">
        <div id="position_name">
            浙江长征技术学院 <span style="float: right;"><a id="adjust" href="adjustPosition.html">地点微调</a></span>
        </div>
        <div id="map" >
            <div id="container">

            </div>
        </div>
    </div>
    <hr>
    <div id="visit" class="container">
        <div class="col-xs-4">
            <label for="target"> 拜访对象 </label>
        </div>
        <div class="col-xs-8">
            <input type="text" id="target" placeholder="请输入您的拜访对象">
        </div>
    </div>
    <hr>
    <div id="picture">
        <img src="../img/test1.PNG" id="img" alt="">
    </div>
    <div id="signin_div" align="center">
        <button class="btn-circle btn-hg blue">签到</button>
    </div>
    <div id="photo" align="center" @click="takenPhoto">
        <button class="btn-circle btn-hg yellow">拍照</button>
    </div>
</div>
<!-- 高德地图js sdk -->
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ed85d92acb9a4905b3592bc4a4bf0fe8"></script>
<!-- 微信js sdk -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<!-- jquery cdn -->
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<!-- bootstrap -->
<script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
<!-- vue -->
<script src="${pageContext.request.contextPath }/js/vue.min.js"></script>
<script>

    var _lng = null; // 经度
    var _lat = null; // 纬度
    var _accuracy = null; // 精度


    var mapObj = new AMap.Map('container', {
        zoom: 19,
        zoomEnable: false,
        resizeEnable: true,
    });

    mapObj.plugin('AMap.Geolocation', function () {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            maximumAge: 0,           //定位结果缓存0毫秒，默认：0
            convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true,        //显示定位按钮，默认：true
            buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
            zoomToAccuracy: true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        });
        mapObj.addControl(geolocation);
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息

    });

    function onComplete(data) {
        var str = ['定位成功'];
        str.push('经度：' + data.position.getLng());
        str.push('纬度：' + data.position.getLat());
        str.push('精度：' + data.accuracy + ' 米');
        str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));


        console.log(str);
        _lng = data.position.getLng();
        _lat = data.position.getLat();
        _accuracy = data.accuracy;
    }

    function onError() {
        alert("onError")
    }


    new Vue({
        el: "#app",
        data: {

        },
        computed:{
            time : function () {
                var data = new Date();
                var time = "";
                return time = time + data.getFullYear()+"年"+( data.getMonth()+1 )+"月"+data.getDate();
            }
         },
        methods : {

        },
        created:function () {
        }
    });

    window.onload = function () {
        // 当前页面加载完成的时候,触发定位的点击事件
        $('.amap-geolocation-con').trigger("click");
    }
</script>
<%
	String url = "http://weixin.jinglianwen.com/SignIn/wechat/signin/signin";
	System.out.println(request.getRequestURL());
	if (request.getQueryString() != null) {
		url = url + "?" + request.getQueryString();
	}
	Map<String, String> ret = JsSignUtil.sign(url);
%>
<script type="text/javascript">
wx.config({
	debug: false,
	appId: '<%=ret.get("appId")%>',
	timestamp:'<%=ret.get("timestamp")%>',
	nonceStr:'<%=ret.get("nonceStr")%>',
	signature:'<%=ret.get("signature")%>',
	jsApiList : [ 'checkJsApi', 'chooseImage' , 'uploadImage' ]
	});//end_config

	wx.error(function(res) {
		$.alert("出错了：" + res.errMsg, "诚善科技");
	});

	wx.ready(function() {
		wx.checkJsApi({
			jsApiList : [ 'chooseImage' , 'uploadImage' ],
			success : function(res) {
			}
		});

		document.querySelector('#photo').onclick = function() {
			wx.chooseImage({
				count : 1, // 默认9
				sizeType : [ 'original', 'compressed' ], // 可以指定是原图还是压缩图，默认二者都有
				sourceType : ['camera' ], // 可以指定来源是相册还是相机，默认二者都有
				success : function(res) {
					var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
					$('#photo').hide();
					document.getElementById("picture").src=localIds[0];					
	                $('#img').show();
	                $('#signin_div').show();
				}
			});
		};//end_document_scanQRCode
		
/* 		document.querySelector('#upload1').onclick = function() {
			wx.uploadImage({
			    localId: imgId1, // 需要上传的图片的本地ID，由chooseImage接口获得
			    isShowProgressTips: 1, // 默认为1，显示进度提示
			    success: function (res) {
			        var serverId = res.serverId; // 返回图片的服务器端ID
			        //在这里判断是否上传完成，上传完成则跳转
			        
			        serverId1 = serverId;
			        $.alert("serverId : "+serverId,"LJ科技");
			        
			    },
			
				fail: function (res) {
					window.alert("上传失败，请检查是否选择照片!");
				}
			});
		};//end_document_scanQRCode
 */
	});//end_ready
</script>
</body>
</html>